<template>
  <uni-popup ref="popup" type="center" background-color="#fff" @click="close">
    <view class="popup-content" @click.stop>
      <view class="record-icon-box">
        <uni-icons
          type="mic-filled"
          size="120"
          :color="isPlaying ? '#f00' : '#000'"
        ></uni-icons>
      </view>

      <view class="record-time-box">
        <text>{{ info.recordTime }}</text>
      </view>

      <view class="record-btn-box">
        <button v-if="!isPlaying" @tap="startPlayback">开始播放</button>
        <button v-if="isPlaying" @tap="pausePlayback">暂停播放</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
const popup = ref(null);

const info = reactive({
  voicePath: '', // 传递过来的音频路径
  recordTime: 0, // 初始倒计时
});

let innerAudioContext = null;
let isPlaying = ref(false);
let countdownInterval = null; // 倒计时定时器

const open = (tempFilePath) => {
  console.log('tempFilePath', tempFilePath);
  info.voicePath = tempFilePath; // 设置音频路径
  popup.value.open();
  initializeAudio(); // 初始化音频并获取时长
};

const close = () => {
  stopPlayback(); // 停止播放
  clearInterval(countdownInterval); // 清除倒计时
  isPlaying.value = false;
  info.recordTime = 0; // 重置倒计时
  popup.value.close();
};

const initializeAudio = () => {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.src = info.voicePath; // 设置音频源

  innerAudioContext.onCanplay(() => {
    info.recordTime = Math.floor(innerAudioContext.duration); // 获取音频时长并取整
    startPlayback();
  });

  innerAudioContext.onPlay(() => {
    console.log('开始播放');
    isPlaying.value = true;
  });

  innerAudioContext.onEnded(() => {
    console.log('播放结束');
    close();
  });

  innerAudioContext.onError((error) => {
    console.error('播放错误:', error);
    close();
    uni.showToast({
      title: '播放出错，请重新尝试',
      icon: 'none',
    });
  });

  innerAudioContext.play(); // 播放音频
};

const startPlayback = () => {
  innerAudioContext.play(); // 确保在这里调用播放
  isPlaying.value = true; // 更新播放状态
  startCountdown(); // 启动倒计时
};

const startCountdown = () => {
  countdownInterval = setInterval(() => {
    if (info.recordTime > 0) {
      info.recordTime--;
    } else {
      stopPlayback(); // 如果倒计时结束，自动停止播放
    }
  }, 1000);
};

const pausePlayback = () => {
  innerAudioContext.pause();
  isPlaying.value = false;
  clearInterval(countdownInterval); // 暂停时清除倒计时
};

const stopPlayback = () => {
  innerAudioContext.stop();
  isPlaying.value = false;
  clearInterval(countdownInterval); // 停止时清除倒计时
};

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.popup-content {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  width: 60%;
  height: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .record-icon-box {
    padding-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .record-time-box {
    text-align: center;
    font-size: 40rpx;
    color: #333;
  }

  .record-btn-box {
    padding-top: 20rpx;
  }

  button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
}
</style>
